<template>
  <div class="news-box">
    <el-card class="box-card" shadow="never">
      <div class="search-box" style="overflow: hidden">
        <div class="search-left">
          <el-icon>
            <Search />
          </el-icon>
          <span>筛选搜索</span>
        </div>

        <div class="search-right">
          <el-button @click="resetFun" class="reset-btn">
            <span>重置</span>
          </el-button>
          <el-button type="primary" @click="getLists" class="el-button">
            <span>查询结果</span>
          </el-button>
        </div>
      </div>

      <el-form :model="search" ref="searchForm" label-width="100px" class="search-form" style="overflow-x: auto">
        <el-form-item label="开始结束月份:" prop="weihuren">
          <el-date-picker v-model="search.month" type="monthrange" range-separator="到" start-placeholder="开始月份"
            end-placeholder="结束月份" format="YYYY-MM" value-format="YYYY-MM" size="large" @change="getLists" />
        </el-form-item>
        <el-form-item label="仓库:" prop="cangkuid">
          <el-select v-model="search.cangkuid" class="m-2" placeholder="状态" size="large" @change="getLists" clearable>
            <el-option v-for="item in cangkus" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
      </el-form>
    </el-card>
    <el-table :data="lists" border style="width: 100%" @row-click="rowCli" :row-class-name="tableRowClassName">
      <el-table-column prop="cangkuname" label="仓库" align="center" header-align="center"></el-table-column>
      <el-table-column prop="dakuandingdan" label="打款订单数" align="center" header-align="center"></el-table-column>
      <el-table-column prop="zhangdanjine" label="账户金额" align="center" header-align="center"></el-table-column>
      <el-table-column prop="tichengjine" label="提成金额" align="center" header-align="center"></el-table-column>
      <el-table-column prop="ticheng" label="提成比例" align="center" header-align="center"></el-table-column>
      <el-table-column prop="yue" label="账户余额" align="center" header-align="center"></el-table-column>
      <el-table-column prop="dongjiejine" label="冻结金额" align="center" header-align="center"></el-table-column>
      <el-table-column prop="dakuanrenshu" label="打款人数" align="center" header-align="center"></el-table-column>
      <el-table-column prop="ordermoney" label="订单打款" align="center" header-align="center"></el-table-column>
      <el-table-column prop="yanshoushujicount" label="验收数量" align="center" header-align="center"></el-table-column>
      <el-table-column prop="dakuanshijian" label="打款时间" align="center" header-align="center"></el-table-column>
      <el-table-column prop="cangkuid" label="充值记录" align="center" header-align="center">
        <template #default="scope">
          <el-button type="primary" v-if="scope.row.cangkuname != '汇总'" @click="getChongZhi(scope.row.cangkuid)"
            size="small">获取充值记录</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script setup>
import { computed, onMounted, ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { getCangkuTongji } from '@api/cangku'
import { ElMessageBox } from 'element-plus'
import { useUserStore } from '@/pinia/user'
import { getMyCangkuList } from '@api/cangku'

const userStore = useUserStore()

const router = useRouter()

// *********************************************列表
const pageNo = ref(1)
const pageSize = ref(10)
const lists = ref([])

//获取列表
async function getLists() {
  let { month, cangkuid } = search.value
  let searchOpt = {
    pageNo: pageNo.value,
    pageSize: pageSize.value
  }

  console.log(month)

  if (month && month.length) {
    searchOpt.starttime = month[0]
    searchOpt.endtime = month[1]
  }

  if (cangkuid) {
    searchOpt.cangkuid = cangkuid
  }

  let res = await getCangkuTongji(searchOpt)

  if (res.code == 200) {
    lists.value = res.data
  }
}

// 搜索
const searchForm = ref()
const time = new Date()
const yearMonth = time.getFullYear() + '-' + (time.getMonth() + 1)
const nextYearMonth = time.getFullYear() + '-' + (time.getMonth() + 1)
const search = ref({
  month: [yearMonth, nextYearMonth],
  cangkuid: ''
})

const resetFun = () => {
  search.value = {
    month: [yearMonth, nextYearMonth],
    shengshiqu: []
  }
  getLists()
}

// 仓库列表
const cangkus = ref([])
const getAllCangkuListFun = async () => {
  let res = await getMyCangkuList()
  if (res.code == 200) {
    cangkus.value = res.data.map((v) => {
      return {
        label: v.name,
        value: v.id
      }
    })
  }
}

const getChongZhi = (id) => {
  router.push({ path: '/home/chongzhi', query: { cangkuid: id } })
}

onMounted(() => {
  getLists()
  getAllCangkuListFun()
})
</script>
<style lang="scss" scoped>
.order-box {
  .left-right-box {
    position: absolute;
    top: 172px;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;

    .left-box {
      height: 100%;
      width: 230px;
      overflow-y: auto;
      overflow-x: hidden;
      padding-top: 50px;
      box-sizing: border-box;
      border: 1px solid #ebeef5;
      position: relative;
      overflow-y: auto;
      border-radius: 4px;
      margin-right: 20px;

      .title {
        font-size: 14px;
        padding: 8px 17px;
        color: #636363;
        height: 32px;
        line-height: 32px;
        font-weight: 600;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        background: #fff;
        z-index: 999;

        .icon {
          float: right;
          font-size: 24px;
          font-weight: 400;
          cursor: pointer;
        }
      }

      .left-lists {
        font-size: 12px;
        padding: 8px 17px;
        color: #636363;
        height: 32px;
        line-height: 32px;
        cursor: pointer;
        position: relative;

        .name {
          float: left;
        }

        .input-name {
          width: 90px;
          float: left;
          padding: 0;

          .el-input__inner {
            padding: 0 10px;
          }
        }

        .option {
          float: right;
        }
      }
    }

    .left-lists.active {
      color: #4c9ff2 !important;
      background-color: #f5f5f5;
    }

    .right-box {
      flex: 1;
      overflow-y: auto;
    }
  }
}
</style>
<style lang="scss">
.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}
</style>
